import React, { Component } from 'react'
import ReactDOM from 'react-dom'

/* function Hello() {
  return <h1>Hello React</h1>
} */

// !#1 必须继承 React.Component，为了后面使用继承过来的属性和方法
// class Hello extends React.Component {
// 和上面等价
class Hello extends Component {
  // !#2 里面必须有 render 方法
  render() {
    // !#3 里面必须有 return，return 什么就会渲染什么
    // this => 谁调用就是谁
    console.log(this)
    return <h1>Hello React</h1>
  }
}

// ReactDOM.render 渲染类组件的过程
// 解析标签，发现是大写开头的，所以会被当做组件来解析，又发现是一个类组件，所以啊
// React 内部会 new Hello()，得到组件实例，接下来会调用实例下面的 render 方法（实例.render()）
// 一点调用 render 就拿到了 JSX，接下来就把 JSX 转成真实 DOM 渲染到页面
ReactDOM.render(<Hello />, document.querySelector('#root'))
